<template>
  <div class="import-editor">
    <el-dialog :title="title" :width="width" :visible.sync="isShowDialog" :close-on-click-modal="false">
      
      <div class="form-top">
        <div class="form-tool"> 
          <div class="form-tool-btn">
            <excel-upload @onSuccess="uploadExcel" size="mini" class="upload-btn">选择Excel</excel-upload>
            <el-button @click="downTemp" class="upload-btn" size="small" icon="el-icon-download">下载模板</el-button>
          </div>
        </div>
      </div>
      <el-table  :data="list" border fit highlight-current-row style="width: 100%">
          <el-table-column
            type="index"
            width="50"
            label="序号">
          </el-table-column>

          <el-table-column v-for="(item) in importField" :key="item.field" align="center" :label="item.field">
            <template slot-scope="{row}">
              <template>
                <span>{{ row[item.field] }}</span>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <datagridPage :currentPageSize="currentPageSize" @tapPage="tapPage" @tapPageSize="tapPageSize" :currentPage="currentPage" :pageSizeOption="pageSizeOption" :total="total"></datagridPage>
      <div slot="footer" class="dialog-footer">
        <template>
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </template>
        
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
  .user-form{padding:0 0 20px;}
  .form-tool{height:40px;display: flex;}
  .form-tool-btn{display: inline;}
  .upload-btn{margin-left:10px;}
  .form-top{display: flex;align-items: center;justify-content: space-between;padding:10px 0;}
  .form-title{font-weight: bold;padding-bottom:10px;}
  .input-number{width:120px;}
  .cover-uploader{width:65px;height:65px;}
  .cover-uploader .cover-uploader-icon{width:60px;height:60px;line-height: 60px;}
  .cover{width:40px;height:40px;}
  .combobox-wrapper{display: flex;align-items: center;justify-content: center;}
  .combobox-btn-mini{height:28px;width:28px;cursor: pointer; display: flex;align-items: center;justify-content: center;position: relative;left:-2px;font-size:14px;border:1px solid #ccc;border-radius: 0 4px 4px 0;}
</style>
<script>
import XLSX, { WorkSheet } from "xlsx";
import excelUpload from '@/components/common/excelUpload';
import {pagination, isObject,getHrefQuery } from '@/utils';
import datagridPage from '@/components/common/datagrid/datagridPage';
export default {
  name:'danFormImportEditor',
  props:{
    width:{
      type:String,
      default(){
        return '960px'
      }
    },
    title:{
      type:String,
      default(){
        return '导入';
      }
    },
    gridDo:{
      type:Object,
      default(){
        return {}
      }
    },
  },
  components:{
    excelUpload,datagridPage
  },
  mounted(){

  },
  created(){

  },
  data(){
    return {
      isShowDialog:false,
      currentRow:'',
      tableData:[],
      importField:[],
      allData:[],
      currentPageSize:200,
      currentPage:1,
      pageSizeOption:[200,500,800,1000],
      total:0
    }
  },
  computed:{
    list(){
      return pagination(this.currentPage,this.currentPageSize,this.allData);
    }
  },
  methods:{
    uploadExcel({header,excelData}){
      this.allData = [];
      let allData = [];
      let fieldArr = [];
      //遍历获取到的数据列表
      excelData.forEach(data=>{
        let colmunData = {};
        let addFlag = true;
        //遍历要导入的字段
        this.importField.forEach(fieldArr=>{
          //遍历当条数据内容，比对字段进行需要的内容赋值
          for (let key in data) {
            if (isObject(fieldArr) && fieldArr.field == key) {
              
              colmunData[fieldArr.field] = data[key];
            }
          }
          if (fieldArr.rule == 'require' && (!colmunData[fieldArr.field] && colmunData[fieldArr.field] != '0')) addFlag = false;
        });
        if (addFlag) allData.push(colmunData);
      });
      this.allData = allData;
      this.total = allData.length;
    },
    
    close(){
      this.isShowDialog = false;
      this.allData = [];
    },
    open(){
      let data = {};
      let query = getHrefQuery();
      for (let queryK in query) {
        if (queryK.match(/.*id/)){
          data[queryK] = query[queryK];
        }
      }
      if (this.gridDo.importFieldArr && this.gridDo.importFieldArr.length > 0){
        this.importField = this.gridDo.importFieldArr;
        this.isShowDialog = true;
      } else if (this.gridDo.importFieldAction) {
        
        this.$request({
          c:this.gridDo.importFieldAction,
          data,
          loading:'加载中'
        }).then(res=>{
          this.importField = res;
          this.isShowDialog = true;
        })
      } else {
        console.log('未配置gridDo。importFieldAction 或 importFieldArr导入字段')
      }
      
    },
    submit(){
      this.$emit('submit',this.allData);
    },
    downTemp(){
      let field = [];
  
      this.importField.forEach(item=>{
        field.push(item.field);
      })
      let worksheet = XLSX.utils.aoa_to_sheet([field]);
      let workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook,worksheet,'Sheet1');
      XLSX.writeFile(workbook,"导入格式.xlsx");
    },
    tapPageSize(pageSize){
      this.currentPageSize = pageSize;
    },
    tapPage(page){
      this.currentPage = page;
    }
  }
}
</script>